<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>inline-block的使用</title>
	<style>
		.box {
			float: left;
			width: 200px;
			height: 100px;
			margin: 1em;
		}

		.elem {
			border: solid #6AC5AC 3px;
			position: relative;
		}

		.box2 {
			display: inline-block;
			vertical-align: revert;

			width: 200px;
			height: 100px;
			margin: 1em;
		}

		.elem-green {
			border: solid #FDC72F 3px;
		}

		.after-box {
			clear: left;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>
	<div class="box elem">
		<span class="label">&lt;div class="box"&gt;</span>
		<p>
			我在浮动！
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</div>

	<section class="elem elem-green after-box">
		<span class="label">&lt;div class="after-box"&gt;</span>
		<p>
			我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。
		</p>
		<span class="endlabel">&lt;/div&gt;</span>
	</section>
</div>


<div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>
	<div class="box2 elem">
		<p>我是一个行内块！</p>
	</div>

	<section class="elem elem-green">
		<p>
			这次我可没有用 <code>clear</code> 。太棒了！
		</p>
	</section>
</div>
</body>
</html>